<template>
  <div class="dashboard-editor-container">

    <el-dialog
      :visible.sync="dialogVisible"
      title="公告列表"
      width="80%"
      @close="handleClose"
    >
      <el-table :data="notices" style="width: 100%">
        <el-table-column prop="noticeTitle" label="公告标题" />
        <el-table-column prop="createTime" label="发布时间" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="viewNotice(scope.$index)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 公告详情显示 -->
      <div v-if="currentNotice" class="notice-detail">
        <h3>{{ currentNotice.noticeTitle }}</h3>
        <div v-html="currentNotice.noticeContent"></div>
        <div class="notice-footer">
          <el-button @click="showPrevious" :disabled="currentIndex <= 0">上一条</el-button>
          <el-button @click="showNext" :disabled="currentIndex >= notices.length - 1">下一条</el-button>
          <el-button @click="closeDetail">返回公告列表</el-button>
        </div>
      </div>
    </el-dialog>



    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <h3 class="chart-title">近七日加油量</h3>
      <line-chart :chart-data="lineChartData" />
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <h3 class="chart-title">最新采购计划</h3>
          <raddar-chart />
        </div>
      </el-col>

      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <h3 class="chart-title">各库站储油量</h3>
          <pie-chart />
        </div>
      </el-col>

      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <h3 class="chart-title">近期考试成绩</h3>
          <bar-chart />
        </div>
      </el-col>
    </el-row>

  </div>

</template>

<script>
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import {  query7days } from '@/api/plan/plan'
import { addNotice, getNotice, listNotice, listNoticeNoPage } from '@/api/system/notice'
import { addRead } from '@/api/read/read'


const lineChartData = {
  newVisitis: {
    lasaData: [200, 120, 161, 134, 105, 160, 165],
    aliData: [120, 82, 91, 154, 162, 140, 145],
    rikazeData:[],
    linzhiData:[],
    peisongData:[]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'Index',
  components: {

    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      // 全屏缩放按钮
      dialogFull:false,
      // 详情加载
      loadingDetail: false,
      // 打开详情
      openDetail: false,
      dialogVisible: false,       // 首页加载时自动弹出公告列表弹窗
      notices: [],               // 公告列表数据
      currentNotice: null,       // 当前公告详情内容
      currentIndex: null   ,      // 当前公告索引
      lineChartData: lineChartData.newVisitis
    }
  },
  created() {
    this.fetchNotices();  // 获取最新公告
    query7days().then(response => {
        let lasaArray = [];
        let lasadata = response.data.lasa;
        for (let i = 1; i <= 7; i++) {
          let key = `day_${i}`;
          lasaArray.push(lasadata[key]);
        }

        let aliArray = [];
        let alidata = response.data.ali;
        for (let i = 1; i <= 7; i++) {
          let key = `day_${i}`;
          aliArray.push(alidata[key]);
        }

        let linzhiArray = [];
        let linzhidata = response.data.linzhi;
        for (let i = 1; i <= 7; i++) {
          let key = `day_${i}`;
          linzhiArray.push(linzhidata[key]);
        }


        let rikazeArray = [];
        let rikazedata = response.data.rikaze;
        for (let i = 1; i <= 7; i++) {
          let key = `day_${i}`;
          rikazeArray.push(rikazedata[key]);
        }
        this.lineChartData.rikazeData=rikazeArray
        this.lineChartData.linzhiData=linzhiArray
  this.lineChartData.aliData=aliArray
        this.lineChartData.lasaData=lasaArray
      }
    );

  },
  methods: {
    // 获取公告列表
    fetchNotices() {
      listNoticeNoPage().then(response => {
        if (response.code === 200) {
          this.notices = response.rows;
          this.dialogVisible = this.notices.some(notice => !notice.read);  // 只有存在未读公告时才显示弹窗
        }
      });
    },
    // 查看公告详情
    viewNotice(index) {
      this.currentIndex = index;
      this.loadNoticeDetail(this.notices[index].noticeId);

    },
    // 加载公告详情内容
    loadNoticeDetail(id) {
      getNotice(id).then(response => {
        if (response.code === 200) {
          this.currentNotice = response.data;
          const readForm={}
          readForm.noticeId=id
          addRead(readForm).then(response => {
            this.$modal.msgSuccess("已知会该通知");
          });

        }
      });
    },
    // 显示上一条公告
    showPrevious() {
      if (this.currentIndex > 0) {
        this.currentIndex -= 1;
        this.loadNoticeDetail(this.notices[this.currentIndex].noticeId);
      }
    },
    // 显示下一条公告
    showNext() {
      if (this.currentIndex < this.notices.length - 1) {
        this.currentIndex += 1;
        this.loadNoticeDetail(this.notices[this.currentIndex].noticeId);
      }
    },
    // 返回公告列表
    closeDetail() {
      this.currentNotice = null;

      // 检查是否还有未读公告
      const hasUnread = this.notices.some(notice => !notice.read);

      if (!hasUnread) {
        this.dialogVisible = false;  // 如果没有未读公告则关闭弹窗
      }
    },
    // 关闭弹窗时的处理
    handleClose() {
      this.dialogVisible = false;
    }

  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
